<template>
  <div>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
      >
        <template
          slot="operator"
          v-if="hasPerm('sound:add')"
        >
          <a-button
            @click="$refs.addDevice.add()"
            icon="plus"
            type="primary"
            v-if="hasPerm('sound:add')"
          >新增设备</a-button>
        </template>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            v-if="hasPerm('sound:edit')"
            @click="$refs.editDevice.edit(record)"
          >编辑</a>
          <a-divider
            type="vertical"
            v-if="hasPerm('sound:edit') & hasPerm('sound:delete')"
          />
          <a-popconfirm
            v-if="hasPerm('sound:delete')"
            placement="topRight"
            title="确认删除？"
            @confirm="() => singleDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
      <add-device
        ref="addDevice"
        @ok="handleOk"
      />
      <edit-device
        ref="editDevice"
        @ok="handleOk"
      />
    </a-card>
  </div>
</template>

<script>
import { deviceDelete } from '@/api/modular/garden/sound'
import { STable, XCard, XDown } from '@/components'
import { deviceList } from '@/api/modular/garden/sound'
import addDevice from './addDevice.vue'
import editDevice from './editDevice.vue'
export default {
  components: {
    XDown,
    XCard,
    STable,
    addDevice,
    editDevice,
  },

  data() {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '设备名称',
          dataIndex: 'name',
        },
        {
          title: '设备编号',
          dataIndex: 'number',
        },
        {
          title: '设备IP地址',
          dataIndex: 'ipAddress',
        },
        {
          title: '班级',
          dataIndex: 'classesName',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: '150px',
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return deviceList(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.data.length) {
            console.log(res.data)
          }
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
    }
  },

  methods: {
    /**
     * 单个删除
     */
    singleDelete(record) {
      this.sysPosDelete(record.id)
    },
    /**
     * 删除
     */
    sysPosDelete(id) {
      deviceDelete({id:id})
        .then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.clearRefreshSelected()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        })
        .catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
    },
    changeStatus(record) {
      console.log(record)
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
